<template>
  <div class="interview-detail-container">
    <el-card class="box-card" v-if="!loading && posting">
      <template #header>
        <div class="card-header">
          <h1>{{ posting.title }}</h1>
          <el-button type="primary" @click="openApplyDialog">立即申请</el-button>
        </div>
        <div class="sub-header">
          <span><el-icon><OfficeBuilding /></el-icon> {{ posting.created_by_name || '未知公司' }}</span>
          <span>发布于: {{ new Date(posting.created_at).toLocaleDateString() }}</span>
        </div>
      </template>
      <div class="job-description" v-html="formatDescription(posting.description)">
      </div>
    </el-card>
    <div v-if="loading" class="loading-state">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 申请弹窗 -->
    <el-dialog v-model="applyDialogVisible" title="申请职位" width="500px">
      <el-upload
        ref="uploadRef"
        :auto-upload="false"
        :limit="1"
        v-model:file-list="resumeFile"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽简历文件到此处或 <em>点击上传</em> (仅限PDF, 5MB以内)
        </div>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleApply" :loading="isApplying">
            提交申请
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { OfficeBuilding, UploadFilled } from '@element-plus/icons-vue';
import { businessApi as api } from '@/services/api';

const route = useRoute();
const router = useRouter();
const posting = ref(null);
const loading = ref(true);
const applyDialogVisible = ref(false);
const isApplying = ref(false);
const resumeFile = ref([]);
const uploadRef = ref();


const fetchPostingDetails = async () => {
  loading.value = true;
  try {
    const response = await api.getJobPosting(route.params.id);
    posting.value = response.data;
  } catch (error) {
    ElMessage.error('获取职位详情失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const formatDescription = (desc) => {
    // 将换行符转换成 <br> 标签以便在 HTML 中正确显示
    return desc.replace(/\n/g, '<br />');
};

const openApplyDialog = () => {
  resumeFile.value = [];
  applyDialogVisible.value = true;
};

const handleApply = async () => {
  if (resumeFile.value.length === 0) {
    ElMessage.warning('请先上传您的简历');
    return;
  }

  isApplying.value = true;
  const formData = new FormData();
  formData.append('job_posting', posting.value.id);
  formData.append('resume_file', resumeFile.value[0].raw);

  try {
    // 我们需要创建一个新的API函数来处理JobApplication
    await createJobApplication(formData);
    ElMessage.success('申请成功！HR将会审核您的简历。');
    applyDialogVisible.value = false;
    // 可以在这里跳转到“我的申请”页面
    // router.push({ name: 'MyApplications' });
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || '申请失败，请稍后再试');
    console.error(error);
  } finally {
    isApplying.value = false;
  }
};

// 需要在api.js中也创建这个
const createJobApplication = (data) => {
  return api.createJobApplication(data);
};


onMounted(fetchPostingDetails);
</script>

<style scoped>
.interview-detail-container {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub-header {
    display: flex;
    gap: 1rem;
    color: #909399;
    font-size: 14px;
    margin-top: 0.5rem;
}
.job-description {
  line-height: 1.8;
  color: #606266;
  padding: 1rem;
}
</style> 